<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="帖子标题:">
        <el-input v-model="queryParam.title"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <router-link :to="{ path: '/forum/post/edit' }" class="link-left">
          <el-button type="primary">发布帖子</el-button>
        </router-link>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="userName" label="发布用户" width="120" />
      <el-table-column prop="createTime" label="发布时间" width="180">
        <template slot-scope="{ row }">
          {{ row.createTime | dateTimeFormat }}
        </template>
      </el-table-column>
      <el-table-column width="220" label="操作" align="center">
        <template slot-scope="{ row }">
          <router-link
            :to="{ path: '/forum/post/view', query: { id: row.id } }"
            class="link-left"
          >
            <el-button size="mini" type="primary">查看</el-button>
          </router-link>
          <el-button
            size="mini"
            type="danger"
            @click="deletePost(row)"
            class="link-left"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParam.pageIndex"
      :limit.sync="queryParam.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import forumApi from "@/api/forum";
import Pagination from "@/components/Pagination";
import { mapGetters, mapState } from "vuex";

export default {
  components: { Pagination },
  filters: {
    dateTimeFormat(time) {
      if (time) {
        const date = new Date(time);
        return (
          date.getFullYear() +
          "-" +
          String(date.getMonth() + 1).padStart(2, "0") +
          "-" +
          String(date.getDate()).padStart(2, "0") +
          " " +
          String(date.getHours()).padStart(2, "0") +
          ":" +
          String(date.getMinutes()).padStart(2, "0")
        );
      }
      return "";
    },
  },
  data() {
    return {
      queryParam: {
        title: "",
        pageIndex: 1,
        pageSize: 10,
      },
      listLoading: true,
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.listLoading = true;
      forumApi
        .getPostPage(this.queryParam)
        .then((data) => {
          const re = data.response;
          this.tableData = re.list;
          this.total = re.total;
          this.queryParam.pageIndex = re.pageNum;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    submitForm() {
      this.queryParam.pageIndex = 1;
      this.search();
    },
    deletePost(row) {
      this.$confirm("确认删除该帖子?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          forumApi.deletePost(row.id).then((re) => {
            if (re.code === 1) {
              this.search();
              this.$message.success("删除成功");
            } else {
              this.$message.error(re.message || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
